<template>
  <div class="warning-center">
    <el-button type="primary" size="small" class="reBtn" @click="handleAddClick">返回预警中心</el-button>
    <addWarning class="common-form-box add-warn" :warning-color="warningColor" @refresh="refreshTable" @update="update" />
    <historyWarning class="common-form-box history-warn" :update-num="updateNum" :warning-color="warningColor" :refresh="refresh" />
  </div>
</template>

<script>
import HistoryWarning from './components/historyWarning'
import AddWarning from './components/addWarning'
export default {
  name: 'Center',
  components: {
    HistoryWarning,
    AddWarning
  },
  data() {
    return {
      warningColor: [{
        label: '一级警报',
        value: 1
      }, {
        label: '二级警报',
        value: 2
      }, {
        label: '三级警报',
        value: 3
      }],
      refresh: false,
      updateNum: 0
    }
  },
  mounted() {
  },
  methods: {
    // 刷新列表
    refreshTable() {
      this.refresh = !this.refresh
    },
    handleAddClick() {
      this.$router.push({
        name: 'WarningCenter'
      })
    },
    update(i) {
      console.log(i)
      if (i) {
        this.updateNum += 1
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.reBtn{
  position: absolute;
  left: 20px;
  top: 20px;
}
  .warning-center {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    .common-form-box {
      margin: 0;
      margin-top: 100px;
    }
    .add-warn {
      width: 30%;
      margin-right: 2.5%;
      // padding: 20px 40px;
      box-sizing: border-box;
    }
    .history-warn {
      width: 62%;
    }
  }
</style>
